<!--
 * @Description: 
 * @Date: 2023-05-06 11:53:52
 * @LastEditors: czp
 * @LastEditTime: 2023-05-06 15:03:41
-->
<template>
	<div class="ty-form">
		<el-form ref="ruleFormRef" :model="editPsdForm" label-width="68px">
			<el-form-item class="ty-form-item" label="旧密码:">
				<el-input v-model="editPsdForm.oldPassword" type="password" />
			</el-form-item>
			<el-form-item class="ty-form-item" label="新密码:">
				<el-input v-model="editPsdForm.newPassword" type="password" />
			</el-form-item>

			<div class="submit ty-form-item">
				<el-button class="btn" color="#C39F63" @click="submit">保存</el-button>
			</div>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="EditPassword">
import { userModifyPassword } from "@/service/modules/user";

export interface IEditPassword {
	oldPassword: string;
	newPassword: string;
}
// 修改密码表单
const editPsdForm = ref<IEditPassword>({ oldPassword: "", newPassword: "" });

/**
 * 提交
 */
const submit = async () => {
	const { message } = await userModifyPassword(editPsdForm.value);
	ElMessage.success({ message });
	editPsdForm.value.oldPassword = "";
	editPsdForm.value.newPassword = "";
};
</script>
<style lang="scss" scoped>
.ty-form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	.ty-form-item {
		width: 440px;
		margin: 2rem 0;
	}
}
.submit {
	color: #ffffff;
	text-align: center;
	.btn {
		width: 180px;
		color: #ffffff;
	}
}
</style>
